<template>
  <div class="shopCar">
    <!-- 导航栏 -->
    <!-- <navTop></navTop>
    <navTwo class="navTwo"></navTwo> -->

    <!-- 购物车 -->
    <div class="shopcart">
      <!-- 购物车头部 -->
      <!-- <div class="shopCarTop">
        <h1>我的购物车</h1>
        <p>
          <router-link to="/shopmall">继续购物 ></router-link>
        </p>
      </div> -->
      <div class="shopCarMain">
        <!-- <div class="title">
          <h3>购物车</h3>
          <div class="sumRight">
            <div class="text">
              <p>
                已选商品<span>{{ goodsNumber }}</span
                >合计(不含运费):<span>￥{{ goodsPrice }}</span>
              </p>
    
            </div>
            <div class="btn" @click="skipOrderFn">
              <button>结算</button>
            </div>
          </div>
        </div> -->
        <div class="line"></div>
        <div class="subTitle">
          <div>
            <input
              type="checkbox"
              @change="allCheckedFn"
              v-model="allChecked"
            />&nbsp;&nbsp;全选
          </div>
          <div>商品信息</div>
          <div>单价</div>
          <div>数量</div>
          <div>金额</div>
          <div>操作</div>
        </div>
        <div class="goodsContent" ref="goodsContent">
          <div
            class="goodsInfo"
            v-for="(item, index) in tableData"
            :key="item.id"
          >
            <div>
              <input
                type="checkbox"
                @change="handleSelectionChange(item.num)"
                v-model="item.ischecked"
              />
              <!-- {{ item }} -->
              <img :src="item.s_good.s_goods_photos[0].path" alt="" />
            </div>
            <div>
              {{ item.s_good.name }}
              <div v-show="item.stockFlag" class="stock">库存不足</div>
              <div v-for="(item2, index) in item.skuName" :key="index">
                {{ item2 }}:{{ item.skuInfo[index] }}
              </div>

              <!-- <div v-html="item.s_good.rich_text"></div> -->
            </div>
            <div>{{ item.s_good.price }}</div>
            <div>
              <!-- {{ item }} -->
              <el-input-number
                style="width: 100px"
                size="mini"
                v-model="item.num"
                @change="
                  handleChange(item.num, item.id, item.s_good.stock_num, index)
                "
                :min="1"
                :max="10"
              ></el-input-number>
            </div>
            <div>{{ item.num * item.s_good.price }}</div>
            <div>
              <button @click="deleteRow(index, tableData, item.id)">
                删除
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 购物车总计 -->
      <div class="shopCarSum">
        <!-- 左边的多选按钮和删除 -->
        <div class="sumLeft">
          <div
            class="check"
            @click="(allChecked = !allChecked), allCheckedFn()"
          >
            <span style="cursor: pointer">{{
              allChecked ? "取消全选" : "全选"
            }}</span>
          </div>
        </div>
        <!-- 右边的商品总价和结算 -->
        <div class="sumRight">
          <div class="text">
            <p>
              已选商品<span>{{ goodsNumber }}</span
              >件，合计(不含运费):<span>￥{{ goodsPrice.toFixed(2) }}</span>
            </p>
            <p>(商品总价：￥{{ goodsSumPrice.toFixed(2) }})</p>
          </div>
          <div class="btn" @click="skipOrderFn">
            <button>去结算</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <!-- <bottomList></bottomList> -->
  </div>
</template>

<script>
// import navTop from "../components/navtop";
// import navTwo from "../components/navTwo";
// import bottomList from "../components/bottomList";
import { shopCar, shopCarDel, shopCarUpdate } from "../../api/test";
export default {
  name: "shopCar",
  data() {
    return {
      allChecked: false,
      multipleSelection: [],
      tableData: [],
      loading: true,
      list: [],
      num: 1,
      stockFlag: false,
      butFlag: true,
    };
  },
  created() {
    shopCar({
      project_id: 149,
    }).then((res) => {
      // console.log(res.data.result);
      let skuarr = [];
      if (localStorage.getItem("skuArr")) {
        skuarr = JSON.parse(localStorage.getItem("skuArr"));
      }
      // console.log(skuarr);
      res.data.result.forEach((item) => {
        if (item.s_good.stock_num <= 0 || item.num > item.s_good.stock_num) {
          console.log(123);
          item.stockFlag = true;
          // this.butFlag = false;
        } else {
          item.stockFlag = false;
        }
        item.ischecked = false;
      });
      this.tableData = res.data.result;
      this.loading = false;

      this.tableData.forEach((item) => {
        skuarr.forEach((item2) => {
          if (item2.shopid == item.goods_id) {
            item.skuName = Object.keys(item2);
            item.skuInfo = Object.values(item2);

            item.skuName.splice(0, 1);
            item.skuName.splice(item.skuName.length - 1, 1);
            item.skuInfo.splice(0, 1);
            item.skuInfo.splice(item.skuInfo.length - 1, 1);
          }
        });
        console.log(this.tableData);
      });
      // console.log(this.tableData);
    });
  },

  components: {
    // navTop,
    // navTwo,
    // bottomList,
  },
  methods: {
    //全选
    allCheckedFn() {
      // console.log(this.allChecked);

      this.tableData.forEach((item) => {
        item.ischecked = this.allChecked;
      });
      this.handleSelectionChange();
    },
    //删除单行
    deleteRow(index, rows, shopId) {
      rows.splice(index, 1);
      // console.log(index, rows, shopId);
      shopCarDel(shopId).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "warning",
        });
        this.handleSelectionChange();
      });
    },
    //单选框变化
    handleSelectionChange(num) {
      let arr = [];
      let checkALl = 0;

      //判断是否全选
      this.tableData.forEach((item) => {
        if (item.ischecked === true) {
          arr.push(item);

          checkALl++;
          if (checkALl === this.tableData.length) {
            this.allChecked = true;
          } else {
            this.allChecked = false;
          }
        } else {
          this.allChecked = false;
          if (item.s_good.stock_num <= 0) {
            item.stockFlag = false;
            // this.butFlag = false;
          }
        }
        console.log(this.tableData);
      });
      // console.log(this.tableData.length, checkALl);

      this.multipleSelection = arr;
      // console.log(this.multipleSelection);
      this.$store.commit("CarToOrder", this.multipleSelection);
    },
    //数量变化
    async handleChange(shopNum, shopId, stockNum, index) {
      let res = await shopCarUpdate(shopId, { num: shopNum });

      if (res.data.result.num > stockNum) {
        this.tableData[index].stockFlag = true;
        // this.butFlag = false;
      } else {
        // this.butFlag = true;
        this.tableData[index].stockFlag = false;
      }
    },
    //全选框
    toggleSelection() {
      this.handleSelectionChange();
    },
    // 跳转到订单页
    skipOrderFn() {
      let checkGoodStock = true;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请勾选要购买的商品",
          type: "warning",
        });
      } else {
        this.tableData.forEach((item) => {
          if (item.ischecked == true) {
            item.stockFlag == true && (checkGoodStock = false);
          }
        });

        if (checkGoodStock) {
          this.$router.push({ path: "/order" });
        } else {
          this.$message({
            message: "商品库存不足",
            type: "warning",
          });
        }
      }
    },
  },
  computed: {
    goodsNumber() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.num);
        }, 0);
      } else {
        return 0;
      }
    },
    goodsPrice() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          // console.log(item.num, item.s_good.price);
          return (total += item.num * item.s_good.price);
        }, 0);
      } else {
        return 0;
      }
    },
    goodsSumPrice() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.num * item.s_good.price);
        }, 0);
      } else {
        return 0;
      }
    },
    // goodsDis() {
    //   if (this.multipleSelection.length !== 0) {
    //     return this.multipleSelection.reduce((total, item) => {
    //       return (total += item.s_good.sale_price * item.num);
    //     }, 0);
    //   } else {
    //     return 0;
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
//el table行样式
.rowStyle {
  // background-color: red !important;

  padding: 500px;
  margin: 200px;
}
.navTwo {
  height: 80px;
  position: relative;
}
.shopCar {
  width: 100%;
  // background-color: rgb(234, 231, 233);
  .shopcart {
    margin: 0 auto;
    width: 100%;
    .shopCarTop {
      background-color: rgb(255, 255, 255);
      height: 66px;
      line-height: 66px;
      position: relative;
      margin-bottom: 19px;
      border-radius: 0px 0px 20px 20px;
      p {
        position: absolute;
        cursor: pointer;
        right: 30px;
        top: 0;
        a {
          font-size: 14px;
          &:hover {
            color: red;
          }
        }
      }
    }
    // .shopCarMain {
    //   background-color: rgb(255, 255, 255);
    //   min-height: 500px;

    //   padding: 30px 20px 50px 20px;
    //   border-radius: 10px;
    //   ::v-deep tr{
    //     // border: 1px solid #000;
    //     margin: 20px;
    //     height: 100px;
    //     // box-sizing: content-box !important;
    //     // border-width: 20px;
    //     border: none;
    //     .ShopImg {
    //       width: 50%;

    //       // height: 100%;
    //     }
    //   }
    // }
    .shopCarMain {
      background-color: rgb(255, 255, 255);
      min-height: 500px;
      padding: 20px 30px;
      margin: 50px 0;
      border-radius: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        // border-bottom: 1px solid #000;
        .sumRight {
          width: 450px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: right;

          .text {
            // width: 50%;
            margin-right: 20px;
            p {
              span {
                color: red;
              }
              span:last-child {
                font-size: 32px;
              }
            }
          }
          .btn {
            width: 20%;
            button {
              background-color: red;
              color: white;
              width: 100px;
              height: 50px;
              border: none;
              border-radius: 200px;
              font-size: 24px;
              cursor: pointer;
              &:hover {
                background-color: rgb(219, 4, 30);
              }
            }
          }
        }
      }
      .line {
        width: calc(100% + 60px);
        height: 1px;
        background-color: #c4c3c3;

        margin: 20px 0;
        margin-left: -30px;
      }
      .subTitle {
        text-align: left;
        display: flex;
        margin: 20px 0;
        & > div {
          &:nth-child(1) {
            flex: 1;
          }
          &:nth-child(2) {
            flex: 3;
          }
          &:nth-child(3) {
            flex: 1;
          }
          &:nth-child(4) {
            flex: 1;
          }
          &:nth-child(5) {
            flex: 1;
          }
          &:nth-child(6) {
            flex: 0.5;
          }
        }
      }

      .goodsContent {
        .goodsInfo {
          text-align: left;
          display: flex;
          margin: 20px 0;
          padding: 20px;
          background-color: rgb(245, 245, 245);
          border-radius: 20px;
          line-height: 60px;
          & > div {
            display: flex;
            align-items: center;
            // justify-content: center;
            &:nth-child(1) {
              flex: 0.85;

              overflow: hidden;
              display: flex;
              align-items: center;
              // padding-left:20px ;
              img {
                // display: inline-block;
                width: 30px;
                margin: 0 10px;
                height: 64px;
              }
            }
            &:nth-child(2) {
              flex: 3;
              padding-right: 20px;
              line-height: 20px;
              box-sizing: border-box;
              flex-direction: column;
              align-items: flex-start;
              position: relative;
              .stock {
                position: absolute;
                left: 50%;
                color: red;
              }
            }
            &:nth-child(3) {
              flex: 0.8;
              font-weight: bolder;
            }
            &:nth-child(4) {
              flex: 1.3;
            }
            &:nth-child(5) {
              flex: 1;
            }
            &:nth-child(6) {
              flex: 0.4;
              button {
                background-color: none;
                border: none;
                cursor: pointer;
                &:hover {
                  color: red;
                }
              }
            }
          }
        }
      }
    }
    .shopCarSum {
      position: sticky;
      bottom: 0;
      z-index: 9999;
      margin-top: 19px;
      margin-bottom: 19px;
      background-color: rgb(255, 255, 255);
      height: 100px;
      display: flex;
      justify-content: space-between;
      .sumLeft {
        height: 100%;
        width: 20%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .check {
          span {
            margin: 0 10px;
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
          input {
            cursor: pointer;
          }
        }
        p {
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .sumRight {
        width: 600px;
        height: 100%;
        display: flex;
        align-items: center;
        .text {
          width: 60%;
          p {
            span {
              color: red;
            }
            span:last-child {
              font-size: 32px;
            }
          }
        }
        .btn {
          width: 40%;
          button {
            background-color: red;
            color: white;
            width: 180px;
            height: 50px;
            border: none;
            border-radius: 200px;
            font-size: 24px;
            cursor: pointer;
            &:hover {
              background-color: rgb(219, 4, 30);
            }
          }
        }
      }
    }
  }
}
</style>